import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_app/mock/jsonSelf.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

class LifePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _lifeState();
  }

}
class _lifeState extends State{
  List imgList = JsonSelf.imgList;
  static List colorList = JsonSelf.colorList;
  List cardList = [
    {"color":colorList[Random().nextInt(7)],"icon":Icons.account_balance_wallet,"name":"游戏"},
    {"color":colorList[Random().nextInt(7)],"icon":Icons.beach_access,"name":"日常"},
    {"color":colorList[Random().nextInt(7)],"icon":Icons.book,"name":"学习"},
    {"color":colorList[Random().nextInt(7)],"icon":Icons.directions_bus,"name":"旅游"},
    {"color":colorList[Random().nextInt(7)],"icon":Icons.directions_walk,"name":"健身"},
    {"color":colorList[Random().nextInt(7)],"icon":Icons.local_movies,"name":"电影"},
    {"color":colorList[Random().nextInt(7)],"icon":Icons.library_music,"name":"音乐"},
    {"color":colorList[Random().nextInt(7)],"icon":Icons.people,"name":"美女"},
  ];
  List tmList = JsonSelf.lifeCardList;

  List<Widget> _buildList(){
    List<Widget> res = [ ];
    for(var i = 0;i< cardList.length;++i){
      res.add(this._moreWidget(cardList[i]['color'], cardList[i]['icon'], cardList[i]['name']));
    }
    return res;
  }
  List<Widget> _buildtmList(){
    List<Widget> res = [];
    print(tmList.length);
    for(var i = 0;i< tmList.length;++i){
      res.add(this._tjCom(tmList[i]['src'], tmList[i]['tagName'],tmList[i]['title'], tmList[i]['dec']));
    }
    return res;
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: PreferredSize(
          preferredSize:Size.fromHeight(MediaQuery.of(context).size.height * 0.1),
          child:AppBar(
              backgroundColor: Colors.white,
              elevation: 0.0,
              centerTitle: false,
              flexibleSpace: Row(
                children: <Widget>[
                  Expanded(child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1576736173237&di=0c7a8a3c5204b1addd04219edabf18c1&imgtype=0&src=http%3A%2F%2Fimg.lemeitu.com%2Fm00%2F5a%2F00%2F29873c9c83d27e260656e13550a14a53__w.jpg',fit: BoxFit.cover))
                ],
              ),
              title: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('生活',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 18
                    ),
                  ),
                  Text("世界是一面镜子，你笑它便笑。",
                    style: TextStyle(
                      color: Color.fromRGBO(211, 211, 211, 1),
                      fontSize: 10,
                    ),
                  ),
                ],
              )
          ),
        ),
        body:ListView(
          children: [
            SizedBox(
              height: 200,
              child: Swiper(
                itemBuilder: (BuildContext context,int index){

                  return Container(
                    padding: EdgeInsetsDirectional.fromSTEB(20,10,20,10),
                    child:ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Image.network(imgList[index],fit: BoxFit.cover)
                    ),
                  );
                },
                itemCount: imgList.length,
                pagination: SwiperPagination(),
                control: null,
              ),
            ),
            SizedBox(
                height: 120,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                        height:25,
                        padding: EdgeInsetsDirectional.fromSTEB(20,0,0,0),
                        child:
                        Text(
                          '服务',
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w200,
                          ),
                        )
                    ),
                    SizedBox(
                      height: 10.0,
                    ),
                    Container(
                        padding: EdgeInsetsDirectional.fromSTEB(20,0,0,0),
                        child: SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: Flex(
                            direction: Axis.vertical,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                children: _buildList(),
                              )
                            ],
                          ),
                        )
                    ),
                  ],
                )
            ),
            Container(
                height:30,
                padding: EdgeInsetsDirectional.fromSTEB(20,0,0,10),
                child:
                Text(
                  '推荐',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w200,
                  ),
                )
            ),
            Container(
              padding: EdgeInsetsDirectional.fromSTEB(20,0,20,0),
              child: Column(
                children: _buildtmList()
              ),
            )
          ],
        )
    );
  }
  Widget _moreWidget(Color color,icon,name){
    return SizedBox(
      width: 80,
      height: 80,
      child: Column(
        children: <Widget>[
          Icon(
            icon,
            color: color,
            size: 40.0,
          ),
          SizedBox(
            height: 5.0,
          ),
          Text(
              name,
            style: TextStyle(
              color:Colors.black,
              fontSize: 12
            ),
          ),
        ],
      ),
    );
  }

  Widget _tjCom(src,tagName,title,dec){
    return SizedBox(
        height: 180,
        child: Column(
          children: <Widget>[
            FractionallySizedBox(
            widthFactor: 1,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: SizedBox(
                  height: 130,
                  child: Image.network(src,fit: BoxFit.fill,),
                ),
              )
            ),
            SizedBox(
              height: 5.0,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                   SizedBox(
                     width: 200,
                       child:  Text(title,
                        style: TextStyle(
                          fontSize: 12,
                          fontWeight: FontWeight.w300
                        ),
                         overflow: TextOverflow.ellipsis,
                       ),
                   ),
                    Container(
                      width: 40,
                      height: 20,
                      decoration: BoxDecoration(
                        border:Border.all(color:Colors.red)
                      ),
                      child: Center(
                        child: Text(tagName,style: TextStyle(color: Colors.red,fontSize: 8),
                      ),
                    )
                    )
                  ],
                ),
                Text(dec,
                  style: TextStyle(
                      fontSize: 10,
                      color: Color.fromRGBO(192, 192, 192, 1)
                  ),
                )
              ],
            )
          ],
        ),
    );
  }

}